import { memo, useCallback } from "react";
import { RoomsWapper } from "./style";
import { useSelector, shallowEqual, useDispatch } from "react-redux";
import SectionRoomItem from "@/components/section-room-item";
import { useNavigate } from "react-router-dom";
import { setDetailInfo } from "@/store/modules/detail";

const EntireRooms = memo(() => {
  const { roomList, totalCount, isLoading } = useSelector((state) => state.entire, { shallowEqual });

  const navigate = useNavigate();
  const dispatch = useDispatch();

  const handleDetail = useCallback(
    (data) => {
      dispatch(setDetailInfo(data));
      navigate("/detail");
    },
    [navigate, dispatch]
  );

  return (
    <RoomsWapper>
      <h2 className="title">共{totalCount}多处住所</h2>
      <div className="list">
        {roomList &&
          roomList.map((item) => {
            return <SectionRoomItem data={item} key={item.id} emit={handleDetail}></SectionRoomItem>;
          })}
      </div>
      {isLoading && <div className="cover"></div>}
    </RoomsWapper>
  );
});

export default EntireRooms;
